import { Vue } from 'vue-class-component'
import router from '@/router'
import store from '@/store'
import { ElMessage } from 'element-plus'
import { computed } from 'vue'
import { rules } from '@typescript-eslint/eslint-plugin'

interface IRegisterParams {
  phoneNumber: string
  verificationCode: string
  userName: string
  password: string
  password1: string
}

export default class register extends Vue {
  loading = false
  registerRule = computed(() => {
    const rule = {
      phoneNumber: [{
        required: true,
        message: '请输入手机号码',
        trigger: 'blur'
      }, {
        validator: (ruleOfMobile, value, callback) => {
          store.dispatch('CheckMobile', this.registerParams)
            .then(response => {
              console.log('connect success')
              const code = response.data.code
              const message = response.data.message
              if (code === 500 || code === 404) {
                return callback(new Error(message))
              }
              return callback()
            })
        },
        trigger: 'blur'
      }],
      verificationCode: [{
        required: true,
        message: '请输入验证码',
        trigger: 'blur'
      }],
      userName: [{
        required: true,
        message: '请输入用户账号',
        trigger: 'blur'
      }, {
        validator: (ruleOfAccount, value, callback) => {
          store.dispatch('CheckAccount', this.registerParams)
            .then(response => {
              console.log('connect success')
              const code = response.data.code
              const message = response.data.message
              if (code === 500 || code === 404) {
                return callback(new Error(message))
              }
              return callback()
            })
        },
        trigger: 'blur'
      }
      ],
      password: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur'
      }],
      password1: [{
        required: true,
        message: '请再次输入密码',
        trigger: 'blur'
      }]
    }
    return rule
  })

  registerParams: IRegisterParams = {
    phoneNumber: '',
    verificationCode: '',
    userName: '',
    password: '',
    password1: ''
  }

  register (): void {
    if (this.registerParams.phoneNumber === '') {
      ElMessage.warning({
        message: '请输入手机号',
        type: 'warning'
      })
    } else if (this.registerParams.verificationCode === '') {
      ElMessage.warning({
        message: '请输入验证码',
        type: 'warning'
      })
    } else if (this.registerParams.userName === '') {
      ElMessage.warning({
        message: '请输入用户账号',
        type: 'warning'
      })
    } else if (this.registerParams.password === '') {
      ElMessage.warning({
        message: '请输入密码',
        type: 'warning'
      })
    } else if (this.registerParams.password1 === '') {
      ElMessage.warning({
        message: '请再次输入密码',
        type: 'warning'
      })
    } else if (this.registerParams.password !== this.registerParams.password1) {
      ElMessage.warning({
        message: '密码不一致',
        type: 'warning'
      })
    } else {
      this.loading = true
      store.dispatch('Register', this.registerParams)
        .then(response => {
          console.log('connect success')
          this.loading = false
          const code = response.data.code
          if (code === 200) {
            router.push({
              path: '/login',
              query: { data: response.data.data }
            })
          }
        })
        .catch(() => {
          this.loading = false
          console.log('connect failed')
        })
    }
  }

  relogin (): void {
    router.push({
      path: '/login'
    })
  }
}
